<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子相关的其他属性</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            overflow: auto;
        }

        /* 
            子元素位于父元素的内容区中，
                如果子元素的大小超过父元素，会导致子元素从父元素中溢出
                可以通过overflow样式来设置父元素如何处理溢出的内容

                可选值：
                    visible 默认值 不对溢出的内容做任何处理，直接在父元素外显示
                    hidden 裁剪溢出内容不予显示
                    scroll 生成垂直和水平双向滚动条
                    auto 根据需要生成滚动条
        */
        .box2{
            width: 100px;
            height: 400px;
            background-color: orange;
            margin: auto;
        }

        a{
            /* 
                display
                    - 可以用来设置元素的类型
                    - 可选值
                        none 元素在页面中不显示
                        inline 元素显示为行内元素
                        block 元素显示块元素
                        inline-block 元素显示为行内块元素
                            - 行内块
                                既不会独占一行也可以设置宽度和高度
                        table 元素具有table标签的特点
                        flow-root 元素会具有html根元素的特点

                visibility
                    - 可以用来设置元素的可见性
                    - 可选值：
                        visible 默认值，元素在页面中正常显示
                        hidden 元素在页面中隐藏，依然会占据网页的位置

            */
            display: block;

            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        div:hover a{
            /* display: block; */
        }

    </style>
</head>
<body>

    <div>
        我是一个div
        <a href="#">我是一个超链接！</a>
        <a href="#">我是一个超链接！</a>
    </div>
    


    <div class="box1">
        <!-- <div class="box2"></div> -->
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit unde officiis dolorem illum sed. Nisi incidunt voluptatum laborum? Impedit, voluptatibus quidem nam ducimus pariatur quaerat doloremque vitae vel iste possimus.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit unde officiis dolorem illum sed. Nisi incidunt voluptatum laborum? Impedit, voluptatibus quidem nam ducimus pariatur quaerat doloremque vitae vel iste possimus.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit unde officiis dolorem illum sed. Nisi incidunt voluptatum laborum? Impedit, voluptatibus quidem nam ducimus pariatur quaerat doloremque vitae vel iste possimus.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit unde officiis dolorem illum sed. Nisi incidunt voluptatum laborum? Impedit, voluptatibus quidem nam ducimus pariatur quaerat doloremque vitae vel iste possimus.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit unde officiis dolorem illum sed. Nisi incidunt voluptatum laborum? Impedit, voluptatibus quidem nam ducimus pariatur quaerat doloremque vitae vel iste possimus.
    </div>


</body>
</html>